//创建三个p标签
let p1 = document.createElement('p');
let p2 = document.createElement('p');
let p3 = document.createElement('p');

//设置p标签的内容
p1.innerHTML = '这是第一个p标签';
p2.innerHTML = '这是第二个p标签';
p3.innerHTML = '这是第三个p标签';
//追加标签
document.querySelector('.box').appendChild(p1);
document.querySelector('.box').appendChild(p2);
document.querySelector('.box').appendChild(p3);

//微任务 DOM渲染前执行
Promise.resolve().then(()=>{
    console.log(document.querySelector('.box').children.length);
    alert('微任务1'); // 此时DOM未渲染
})

//宏任务 DOM渲染后执行
setTimeout(()=>{
    console.log(document.querySelector('.box').children.length);
    alert('宏任务1'); // 此时DOM已渲染
})